<script setup>
    import { onMounted } from 'vue'
    import positionIcon1 from '../../../assets/images/travel_1.png'
    import positionIcon2 from '../../../assets/images/travel_2.png'
    import positionIcon3 from '../../../assets/images/travel_3.png'

    // 创建Map实例
    let map = undefined

    // 徐庄坐标
    let xzPosition = [117.591789,35.0625482]
    
    let positionIcon = [positionIcon1, positionIcon1, positionIcon2, positionIcon3]

    onMounted(() => {
        map = new BMapGL.Map("container");            // 创建Map实例  
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小    
        map.setMapType(BMAP_SATELLITE_MAP);
        
        var point = new BMapGL.Point(...xzPosition);    // 创建点坐标
        map.centerAndZoom(point,13);                     // 初始化地图,设置中心点坐标和地图级别。
        // map.setHeading(64.5);   //设置地图旋转角度
    })

    let resData = $ref([])


    const init = (data, itemValue = 0) => {
        map.clearOverlays()

        resData = data

        let arr = []

        if(resData.length){
            arr = resData.map((item) => {
                if(!item.location) return []
                return [item.location.split(',')[0], item.location.split(',')[1]]
            })
        }
        // let arr = [[117.591789,35.0625482]]


        // 初始化地图,设置中心点坐标和地图级别。

        
        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            if(!arr[i]) return 

            let iconIndex = 0
            switch (resData[i].type) {
                case '1':
                    iconIndex = 1
                    break;
                case '2':
                    iconIndex = 2
                    break;
                case '3':
                    iconIndex = 3
                    break;
                default:
                    iconIndex = 0
                    break;
            }

            var myIcon = new BMapGL.Icon(positionIcon[iconIndex], new BMapGL.Size(39, 54));


            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, -60), // 设置文本偏移量
            };
            var label = new BMapGL.Label(resData[i].name || resData[i].title, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "14px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            map.addOverlay(label);
            map.addOverlay(marker)

            // 鼠标点击坐标
            marker.addEventListener('click', function (e) {
                dialogVisible = true
                details = resData[i]
            })
        }

        setTimeout(() => {
            map.setTilt(65);       //设置地图的倾斜角度
        }, 1000);
    }


     // 点击区域村 设置该村区域地图中心点
    const setMapCenterPoint = (data) => {
        let pointArray = xzPosition
        let size = 13

        if(data && data.location){
            pointArray = [data.location.split(',')[0], data.location.split(',')[1]]
            size = 17
        }

        // 创建点坐标
        var point = new BMapGL.Point(...pointArray);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, size);
        setTimeout(() => {
            map.setHeading(0) 
            map.setTilt(65);                
        }, 500);     
    }

    defineExpose({
        init,
        setMapCenterPoint
    })

    let dialogVisible = $ref(false)
    let details = $ref({})

    // 播放音频
    
    let audio = null
    const playAudio = () => {
        stopAudio()
        audio = new Audio()
        audio.src = details.audio
        // audio.loop = "loop"
        audio.play()
    }

    
    //停止音频
    const stopAudio = () =>{
        if(audio) audio.pause()
    }

    // 显示vr
    let showVrDialog = $ref(false)

</script>

<template>
    <div class="agriculture-map-wrap">
        <div id="container"></div>

        <el-dialog
            v-model="dialogVisible"
            width="1050px"
            custom-class="xz-dialog traver-details-dialog"
            @close="stopAudio"
        >   
            <div class="dialog-title">旅游景点</div>
            <div class="traver-details-wrap">
                <div class="traver-details flex">
                    <div class="photo">
                        <div class="photo-img" >
                            <img :src="details.image || details.img" alt="">
                            <div class="vr flex-center" v-if="details.vr" @click="showVrDialog=true">
                                <img src="../../../assets/images/vr.png" alt="">
                                查看VR全景
                            </div>
                        </div>
                        <div class="title flex">
                            {{ details.name || details.title }}
                            <img v-if="details.audio" src="../../../assets/images/voice.png" @click="playAudio">
                        </div> 
                    </div>
    
                    <div class="traver-content">
                        <el-scrollbar style="height: 400px">
                            <div class="des" v-html="details.des || details.introduction">
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            v-model="showVrDialog"
            width="80%"
            :title="details.name || details.title"
            custom-class="vr-dialog"
        >   
            <iframe :src="details.vr" style="width: 100%; height: 780px" frameborder="0"></iframe>
            
        </el-dialog>

    </div>
</template>

<style lang="less">
    .el-dialog__headerbtn .el-dialog__close{
        font-size: 24px;
    }

    .vr-dialog{
        .el-dialog__header .el-dialog__title{
            font-size: 24px;
        }
        .el-dialog__body{
            padding-top: 10px;
        }
    }
</style>

<style lang="less" scoped>
    .agriculture-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }

    .traver-details-dialog{
        padding: 20px;
        height: 500px;

        .traver-details-wrap{
            padding: 20px 0;
        }

        .photo{
            width: 265px;
            height: 223px;

            .photo-img{
                width: 100%;
                position: relative;

                &>img{
                    width: 100%;
                }

                .vr{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 34px;
                    background: rgba(0, 0, 0, .7);
                    color: #fff;
                    cursor: pointer;

                    &:hover{
                        color: #00deff;
                    }

                    img{
                        width: 30px;
                        height: 17px;
                        margin-right: 8px;
                    }
                }
            }

            .title{
                display: block;
                font-size: 18px;
                font-weight: bold;
                padding: 12px 0;
                color: #fff;
                text-align: center;

                img{
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 10px;
                    margin-top: -2px;
                    cursor: pointer;
                }
            }
        }

        .traver-content{
            flex: 1;
            margin-left: 17px;
            color: #fff;

            .des{
                font-size: 14px;
                line-height: 26px;
            }
        }
    }
</style>